<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月17日 13:39:48
-->
<template>
  <div class="userSettings animate__animated animate__jello">
    <div class="back">
      <span
        @click="
          () => {
            this.$router.go(-1);
          }
        "
        >◁ 返回上一页</span
      >
    </div>
    <section>
      <a-menu v-model="current" mode="inline" @click="tabclick">
        <a-menu-item key="person">个人资料</a-menu-item>
        <a-menu-item key="message">消息通知</a-menu-item>
      </a-menu>
      <Person v-if="current[0] == 'person'" />
      <message v-if="current[0] == 'message'" />
    </section>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import Person from "./modules/person";
import message from "./modules/message";
import { requset } from "@/api";
export default {
  name: "userSettings",
  /**注册组件*/
  components: { Person, message },
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      current: ["person"],
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/
  watch: {},
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/
  mounted() {
    let name = this.$route.query.name;
    if (name) {
      this.current = ["message"];
    }
  },
  /**所有方法*/
  methods: {
    tabclick({ item, key, keyPath }) {
      this.current = [key];
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.back {
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 600;
  position: sticky;
  top: 52px;
  background: #fff;
  z-index: 99;
}
/* 如果浏览器窗口小于 500px */
@media only screen and (max-width: 900px) {
  .back {
    padding: 16px 0;
  }
}
.back > span:hover {
  color: #1890ff;
  cursor: pointer;
}
section {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
::v-deep .ant-menu-inline {
  width: 130px;
  text-align: center;
}
</style>
